@use 'sass:color';
@use 'Variables.scss';

button:not(.MuiIconButton-root):not(.MuiTab-root):not(.MuiAccordionSummary-root),
button:hover:not(.MuiIconButton-root) {
  &:focus-visible {
    outline: 0.1em solid Variables.$dark-grey;
  }
}

*[data-todotxt-attribute] {
  --color1: #5a5a5a;
  --color2: #ccc;
  .overlay {
    svg {
      color: var(--color1);
    }
  }

  .MuiBadge-root {
    &.notify {
      .MuiBadge-badge {
        color: white;
        background: #ff3860;
      }
    }
  }

  button,
  button:hover {
    color: var(--color1);
    background: var(--color2);
    &:focus-visible {
      outline-color: var(--color1);
    }
    .MuiChip-root {
      color: white;
      background: var(--color1);
    }
  }
  .MuiBadge-badge {
    color: var(--color2);
    background: var(--color1);
  }
  .MuiBadge-dot {
    background: #ff3860;
  }
  &.selected {
    button {
      color: white;
      background: var(--color1);
    }
  }
  .selected.excluded {
    button {
      color: var(--color1);
      background: var(--color2);
    }
  }
}

*[data-todotxt-attribute='priority'] {
  --color1: white;
  button {
    &.Mui-disabled {
      color: white;
    }
  }
  &.selected {
    button {
      color: white;
      background: Variables.$dark-grey;
    }
  }
  .overlay {
    svg {
      color: var(--color2);
    }
  }
}

*[data-todotxt-attribute='priority'][data-todotxt-value='A'] {
  --color2: #ff0000;
  border-left-color: var(--color2);
  &.selected {
    button {
      background: color.adjust(#ff3860, $lightness: -25%);
    }
  }
}

*[data-todotxt-attribute='priority'][data-todotxt-value='B'] {
  --color2: #fd7d67;
  border-left-color: var(--color2);
  &.selected {
    button {
      background: color.adjust(#fa745e, $lightness: -25%);
    }
  }
}

*[data-todotxt-attribute='priority'][data-todotxt-value='C'] {
  --color2: #ffdd57;
  border-left-color: var(--color2);
  &.selected {
    button {
      background: color.adjust(#ffdd57, $lightness: -25%);
    }
  }
}

*[data-todotxt-attribute^='pm'] {
  --color1: rgb(221, 44, 0);
  --color2: white;
  button {
    &.Mui-disabled {
      color: white;
    }
  }
  .overlay {
    svg {
      color: var(--color1);
    }
  }
  .selected {
    button {
      color: white;
      background: rgb(221, 44, 0);
    }
  }
}

*[data-todotxt-attribute='projects'] {
  --color1: #6f266f;
  --color2: #f1d6f1;
}

*[data-todotxt-attribute='contexts'] {
  --color1: #1e6251;
  --color2: #c5ede3;
}

.dark {
  button:not(.MuiIconButton-root),
  button:hover:not(.MuiIconButton-root) {
    outline-color: Variables.$light-grey;
  }
  *[data-todotxt-attribute]:not(
      [data-todotxt-attribute='priority'],
      [data-todotxt-attribute='projects'],
      [data-todotxt-attribute='contexts'],
      [data-todotxt-attribute^='pm']
    ) {
    --color1: #f0f0f0;
    --color2: #5a5a5a;
    button {
      .MuiChip-root {
        background: color.adjust(#5a5a5a, $lightness: -10%);
      }
    }
    &.selected {
      button, div {
        background: color.adjust(#5a5a5a, $lightness: -15%);
      }
    }
  }

  *[data-todotxt-attribute='contexts'] {
    --color1: #c5ede3;
    --color2: #1e6251;
    &.selected {
      button {
        background: color.adjust(#1e6251, $lightness: -10%);
      }
    }
  }
  *[data-todotxt-attribute='projects'] {
    --color1: #f1d6f1;
    --color2: #6f266f;
    &.selected {
      button {
        background: color.adjust(#6f266f, $lightness: -10%);
      }
    }
  }
}
